<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2 定时器</title>
</head>
<body>
    <h1>定时器</h1>
    <input type="button" value="停止" id="btn1">
    <input type="button" value="开始" id="btn2">

</body>
<script src="../common.js"></script>
<script>

    /*
        获取当前时间
    */

    var date = new Date();
    var year = date.getFullYear(); // 年
    var month = date.getMonth(); // 月
    var day = date.getDate(); // 日
    var hour = date.getHours(); // 时
    var mins = date.getMinutes(); // 分
    var sec = date.getSeconds(); // 秒

    console.log(`${year}-${month}-${day} ${hour}:${mins}:${sec}`);


    /*
    
        定时器
            setInterval(fn,30): 每隔30毫秒执行一次fn函数，返回一个id标识，间隔型
            clearInterval(intervalID): 去除指定id标识的定时器操作

            setTimeout(fn,200): 200毫秒后执行fn这个函数（只执行一次），返回一个id标识，倒计时
            clearTimeout(timeoutID): 清除指定id标识的延迟操作

    */

    // 写法一：写在定时器外面，该功能只需要早定时器里调动
    // setInterval(function() {
    // },1000)

    // 写法二：函数写在外面，调用函数名即可，功能不单是在定时器里需要调用的时候，最好封装

    (function () {

        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');

        // 间隔型
        var num = 0;
        function show () {
            num++;
            console.log('宋雨琦' + num);
        }

        var timer = setInterval(show, 1000);

        console.log(timer);

        // 关闭定时器
        btn1.onclick = function () {
            clearInterval(timer);
        }

        // 开启定时器
        btn2.onclick = function () {
            timer = setInterval(show, 1000);
        }

        // 倒计时型
        setTimeout(function () {
            alert('倒计时结束')
        },5000)

    }) ();

</script>
</html>